<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_元素显示模式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            /* 块级元素：可以自定义宽高，元素竖着排
             div 默认高度为0，宽度为父级宽度的100% */
            display: block;
        }
        span{
            background-color: orange;
            /* 行内元素：无法设置宽高，可以与其他元素共处一行，横着排，大小是由内容决定的
             如果需要设置内行元素的大小，可以切换显示模式*/
            display: inline;
            width: 200px;
            height: 200px;
            /*display: block;*/
        }
        input,button{
            /* 行内块元素：既能像块级元素设置宽高，也可以像行内元素横着排 */
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        .d2{
            background-color: pink;
            /*设置显示模式为消失，此元素会释放自己原来占有的页面布局空间*/
            display: none;
        }
    </style>
</head>
<body>
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <hr>
    <span>1234567891111111111</span>
    <span>123456789</span>
    <span>123456789</span>
    <hr>
    <input type="text">
    <input type="text">
    <button>按钮</button>
</body>
</html>